<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="我的认证" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="w100 bg-f7f7f7" style="height: 10rpx;"></view>
		<view class="padding-x-24 padding-y-10 flex align-center justify-between solid-bottom">
			<view class="fs-26 color-333">姓名<text class="color-zhuse">*</text></view>
			<input type="text" v-model="subInfo.real_name" class="fs-26 color-aaa flex1 text-right h40" placeholder="请输入姓名">
		</view>
		<view class="padding-x-24 padding-y-10 flex align-center justify-between solid-bottom">
			<view class="fs-26 color-333">身份证号<text class="color-zhuse">*</text></view>
			<input type="text" v-model="subInfo.idcard_num"  class="fs-26 color-aaa flex1 text-right h40" placeholder="请输入身份证号">
		</view>
		<view class="padding-x-24 margin-top-30 fs-26 color-333">身份证照片<text class="color-zhuse">*</text> </view>
		<view class="fs-26 color-aaa margin-y-30 padding-x-24">
			1.身份证照片不得有遮挡，保证字迹清晰<br>
			2.请在白色背景下拍摄，保证身份证边缘清晰<br>
			3.请从证件的正上方拍摄，防止画面变形
		</view>
		<view class="flex align-center justify-between padding-x-24">
			<view class="flex1 margin-right-30 text-center">
				<view  @tap="uploadImg('idcard_front')" class="img_box flex1 flex align-center justify-center">
					<image v-if="!idcard_front" src="../../static/img/add_icon.png" class="add_icon"></image>
					<image v-else :src="idcard_front" class="w100" style="height: 100%;"></image>
				</view>
				<view class="fs-28 color-333 margin-top-40">身份证正面</view>
			</view>
			<view class="flex1 text-center">
				<view @tap="uploadImg('idcard_back')" class="img_box flex1 flex align-center justify-center">
					<image v-if="!idcard_back" src="../../static/img/add_icon.png" class="add_icon"></image>
					<image v-else :src="idcard_back" class="w100" style="height: 100%;"></image>
				</view>
				<view class="fs-28 color-333 margin-top-40">身份证反面</view>
			</view>
		</view>
		
		<view v-if="status == 'apply'" class="padding-x-60 margin-y-48 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">申请中</view>
		</view>
		<view v-if="status == 'reject'" class="padding-x-60 margin-y-48 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">已驳回</view>
		</view>
		<view v-if="!status" class="padding-x-60 margin-y-48 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">确定</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subInfo:{
					real_name:"",
					idcard_num:"",
					idcard_front:"",
					idcard_back:"",
					type:""
				},
				idcard_front:"",
				idcard_back:"",
				status:''
			}
		},
		onLoad(opt) {
			this.subInfo.type = opt.type;
			this.init()
		},
		methods:{
			init(){
				this.$api.real_name_info({type:this.subInfo.type}).then(res=>{
					if(res.code == 1){
						if(res.data){
							this.subInfo.real_name = res.data.real_name;
							this.subInfo.idcard_num = res.data.idcard_num;
							this.subInfo.idcard_front = res.data.idcard_front;
							this.subInfo.idcard_back = res.data.idcard_back;
							this.idcard_front = res.data.idcard_front_img;
							this.idcard_back = res.data.idcard_back_ing;
							this.status = res.data.status;
						}
					}
				})
			},
			uploadImg(type){
				this.$tool.upload().then(res=>{
					if(type == 'idcard_front'){
						this.idcard_front =  res.showImg;
						this.subInfo.idcard_front = res.id;
					}
					if(type == 'idcard_back'){
						this.idcard_back =  res.showImg;
						this.subInfo.idcard_back = res.id;
					}
				})
			},
			submit(){
				this.$api.real_name(this.subInfo).then(res=>{
					this.$msg(res.msg)
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack()
						},400)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img_box{
		border: 1rpx dashed #eee;
		height: 220rpx;
		.add_icon{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
